﻿<template>
    <div class="page">
        <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner navbar-inner-centered-title">
                <div class="title text-color-primary" id="title">提交撤回</div>
                <div class="right">
                    <!-- 关闭弹窗 -->
                    <a class="link popup-close color-primary" data-popup=".revoke-popup">
                        <i class="icon f7-icons if-not-md">xmark_circle</i>
                        <i class="icon material-icons md-only ">xmark_circle</i>
                    </a>
                </div>
            </div>
        </div>
        
        <div class="page-content">
            <form class="list list-strong-ios list-outline-ios "  id="revoke-form">
                <ul>
                    <li class="item-content item-input item-input-outline ">
                        <div class="item-inner">
                            <div class="item-title item-label text-color-primary item-input-with-value">类型</div>
                            <div class="item-input-wrap input-dropdown-wrap">
                                <select name="reviseType" placeholder="选择..." required  id="select-type">
                                </select>
                            </div>
                        </div>
                    </li>
                    <li class="item-content item-input item-input-outline">
                        <div class="item-inner">
                            <div class="item-title item-label text-color-primary">撤回原因</div>
                            <div class="item-input-wrap">
                                <textarea name="reason" class="resizable" rows="5" id="reason" style="min-height:100px;"></textarea>
                                <span class="input-clear-button" id="clear-reason"></span>
                            </div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="button-panel">
                            <button type="submit" class="button button-fill confirm-button">确定</button>
                        </div>
                    </li>
                </ul>
            </form>
            <br />
        </div>
    </div>
</template>
<script>   
    export default (props, { $, $on, $f7, $h, $f7router, $theme, $update, $store }) => {
        /*
            $   Dom7 标准库
            $on 页面事件处理器绑定
            $f7 app实例对象
            $h  html模板字面量
        */
        let examId,reportId,title;

        $on('pageInit', (e, page) => {
            reportId = $store.getters.reportId.value;
            examId = $store.getters.examId.value;
            title = $store.getters.revokeTitle.value;
            $("#title").html(title);
            loadType();
            addSumitListener();
        })

        // 加载修正类型
        const loadType = () => {
            fetch(`/api/get-data-dict-by-name/报告修订类型`, {
                method: 'GET',
                headers: { 'Content-Type': 'application/json' }
            }).then((res) => {
                res.json().then((result) => {
                    let str = '';
                    result.map((item) => {
                        str += `<option value="${item.value}">${item.label}</option>`
                    });
                    $("#select-type").append(str);
                    $("#select-type").val('');
                });
            })
        }

        // 表单提交
        const addSumitListener = () => {
            $("#revoke-form").on('submit', (e) => {
                e.preventDefault();
                $f7.preloader.show();
                let data = $f7.form.convertToData("#revoke-form");
                fetch(`/api/report/revoke-mobile/${examId}`, {
                    method: 'POST',
                    body: JSON.stringify(data),
                    headers: { 'Content-Type': 'application/json' }
                }).then((res) => {
                    res.json().then((result) => {
                        if (result.success) {
                            $f7.popup.close(".revoke-popup");
                            $f7.preloader.hide();
                            $f7.dialog.alert(`<span class="text-color-primary"><b>${title}成功！</b></span>`, '提示', () => {
                                $f7.emit('revokeSuccess', result.data);
                            });
                        }
                    });
                })
            })
        }

        return $render;
    };
</script>
